<template>
  <div class="detail">
    <img :src="item.thumb_img" alt="" />
    <h2>{{ item.title }}</h2>
    <p>
      <span>{{ item.click_rate }}次预览</span>
      <span>{{ item.created_at | times }}</span>
    </p>
    <h3 class="title">{{ item.description }}</h3>
    <div class="solide"></div>
    <div v-html="item.content" class="con"></div>
  </div>
</template>

<script>
import { getNewsDetail } from "../../utils/api";
export default {
  data() {
    return {
      id: this.$route.query.id,
      item: {},
    };
  },
  mounted() {
    getNewsDetail(this.id).then((res) => {
      console.log(res.data);
      this.item = res.data;
    });
  },
  methods: {},
  components: {},
  filters: {
    times(val) {
      let time = val*1000
      let t = new Date(time)
     let m = (t.getMonth()+1 + '').padStart(2,'0')
     let d = (t.getDate()+'').padStart(2,'0')
     return `${m}-${d}`
    },
  },
};
</script>

<style lang='scss' scoped>
.detail {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: auto;
  }
  h2 {
    margin-left: 20px;
    font-weight: normal;
    font-size: 20px;
  }
  p {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px 30px;
    color: #a7a7a7;
  }
  .solide {
    width: 120px;
    height: 1px;
    background-color: #eee;
    margin: 30px auto 20px;
  }
  .title {
    text-align: center;
    font-weight: normal;
    font-size: 18px;
    color: #a7a7a7;
    position: relative;
  }
  .con {
    font-size: 18px;
    padding-left: 15px;
  }
}
</style>
